<template></template>

<script setup>
import * as L from 'leaflet'
import Point from './point.vue'
import Popup from './popup.vue'
import { usedisasterStore } from '@/pages/geological-disaster/store/store'
const disasterStore = usedisasterStore()
const pointsAll = ref([])
const layerGroup = L.layerGroup()
const markers = ref([])
const baseMap = inject('baseMap')
watch(
  () => disasterStore.mappointData,
  (newval, oldval) => {
    if (newval) {
      pointsAll.value = newval
      handleInitPoint(newval)
    }
  },
  {
    depp: true
  }
)
const handleInitPoint = points => {
  markers.value.forEach(el => el && el.remove())
  points.forEach(item => {
    const markerContainer = document.createDocumentFragment()
    const popupContainer = document.createDocumentFragment()
    const pointDom = createApp(Point, {
      item
    }).mount(markerContainer)
    let latlng = [item.latitude, item.longitude]
    let marker = null
    marker = L.marker(latlng, {
      icon: L.divIcon({
        iconAnchor: [25, 20],
        html: pointDom.$el
      })
    })
    const popupDom = createApp(Popup, {
      item
    }).mount(popupContainer)
    marker
      .bindPopup(popupDom.$el, {
        className: 'lightningPop-warp'
      })
      .openPopup()
    markers.value.push(marker)
    layerGroup.addLayer(marker)
  })
  useEventBus('handleAddLayer').emit(layerGroup, 'disaster')
}

onUnmounted(() => {
  useEventBus('handleRemoveLayer').emit('disaster')
})
</script>

<style lang="scss" scoped></style>
<style>
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
  top: -100px !important;
}
</style>
